<template>
  <n-config-provider
    :theme="_darkTheme"
    :theme-overrides="themeOverrides"
    :locale="locale"
    :date-locale="dateLocale"
  >
    <n-notification-provider>
        <Notification />
        <n-message-provider>
          <Message />
          <router-view></router-view>
        </n-message-provider>
    </n-notification-provider>
  </n-config-provider>
</template>
<script lang="ts" setup>
import { computed, reactive } from "vue";
import { darkTheme, GlobalThemeOverrides } from "naive-ui";
import { zhCN, dateZhCN } from "naive-ui";
import appStore from "@/packages/pinia/app.ts";
import Message from "@/packages/layout/components/Message.vue";
import Notification from "@/packages/layout/components/Notification.vue";

const app = appStore();
const themeOverrides: GlobalThemeOverrides = reactive({
  common: {
    primaryColor: computed(() => app.userSetting.themeColor),
    primaryColorHover: computed(() => app.userSetting.themeColor),
    progressRailColor: computed(() => app.userSetting.themeColor),
  },
});

const _darkTheme = computed(() => (app.userSetting.themeName ? darkTheme : null));

const locale = computed(() => (app.userSetting.language ? zhCN : null));

const dateLocale = computed(() => (app.userSetting.language ? dateZhCN : null));
</script>
<style lang="less"></style>
